<template>
  <div class="editor-container">
    <!-- 左侧：可拖拽组件库 -->
    <div class="components-panel">
      <h3>拖拽组件到编辑区</h3>
      <draggable 
        v-model="components" 
        :options="{ group: 'components', sort: false }"
        class="components-list"
      >
        <div 
          v-for="(item, index) in components" 
          :key="index" 
          class="component-item"
        >
          {{ item.label }}
        </div>
      </draggable>
    </div>

    <!-- 中间：GrapesJS 编辑区 -->
    <div class="grapesjs-editor" ref="grapesContainer"></div>

    <!-- 右侧：操作按钮 -->
    <div class="action-panel">
      <button @click="exportJson">导出配置</button>
      <button @click="clearEditor">清空编辑区</button>
    </div>
  </div>
</template>

<script>
import grapesjs from 'grapesjs'
import 'grapesjs/dist/css/grapes.min.css'
// import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css'
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      // 可拖拽组件列表
      components: [
        { label: '标题', type: 'text', tag: 'h1', content: '默认标题' },
        { label: '段落', type: 'text', tag: 'p', content: '默认段落内容' },
        { label: '按钮', type: 'button', content: '点击我' },
        { label: '图片', type: 'image', src: 'https://picsum.photos/200/200' }
      ],
      editor: null  // GrapesJS 实例
    }
  },
  mounted() {
    this.initGrapesJS()
    this.setupDragAndDrop()
  },
  methods: {
    // 初始化 GrapesJS 编辑器
    initGrapesJS() {
      this.editor = grapesjs.init({
        container: this.$refs.grapesContainer,
        height: '100%',
        width: '100%',
        // 自定义组件类型
        blockManager: {
          appendTo: false  // 不使用默认组件面板
        }
      })
    },

    // 配置拖拽到编辑区的逻辑
    setupDragAndDrop() {
      const editor = this.editor
      // 监听 vuedraggable 的拖拽事件（通过 Sortable.js 原生事件）
      document.querySelector('.components-list').addEventListener('dragend', (e) => {
        const index = e.target.dataset.index
        if (index === undefined) return

        const component = this.components[index]
        // 根据组件类型添加到 GrapesJS
        switch (component.type) {
          case 'text':
            editor.getWrapper().append(`<${component.tag}>${component.content}</${component.tag}>`)
            break
          case 'button':
            editor.getWrapper().append(`<button>${component.content}</button>`)
            break
          case 'image':
            editor.getWrapper().append(`<img src="${component.src}" alt="img">`)
            break
        }
      })
    },

    // 导出当前编辑的组件配置
    exportJson() {
      const data = this.editor.getComponents().toJSON()
      console.log('导出配置:', data)
      alert('配置已导出到控制台')
    },

    // 清空编辑区
    clearEditor() {
      this.editor.getWrapper().empty()
    }
  },
  beforeDestroy() {
    // 销毁编辑器实例
    if (this.editor) {
      this.editor.destroy()
    }
  }
}
</script>

<style scoped>
.editor-container {
  display: flex;
  height: 80vh;
  gap: 20px;
  padding: 20px;
}

.components-panel {
  width: 200px;
  border: 1px solid #eee;
  padding: 10px;
}

.components-list {
  margin-top: 10px;
}

.component-item {
  padding: 10px;
  margin: 5px 0;
  background: #f5f5f5;
  cursor: move;
  text-align: center;
  border-radius: 4px;
}

.grapesjs-editor {
  flex: 1;
  border: 1px solid #eee;
}

.action-panel {
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

button {
  padding: 10px;
  border: none;
  background: #42b983;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background: #359e75;
}
</style>